<template>
  <div class="audit-history__steps" v-show="!props.collapseState">
    <div class="history-steps__title">事项审核记录</div>
    <div class="history-steps__content">
      <div class="step-item" v-for="(item, index) in props.progressList" :key="index">
        <div class="step-left">
          <div class="circle">
            <div class="point" :style="{ background: renderTextColor(item.status) }"></div>
          </div>
          <div class="step-line" v-if="index < progressList.length - 1"></div>
        </div>
        <div class="step-right">
          <p class="g-font-14n1 g-mb4">
            {{ item.name }}
            <el-tag class="g-ml4" :type="renderTag(item.status)" v-if="item.subName">
              {{ item.subName }}
            </el-tag>
          </p>
          <div class="g-flex-start-center">
            <template v-if="item.subTitle">
              <span class="g-font-12n2"> {{ item.subTitle }}</span>
              <div class="line"></div>
            </template>
            <span class="g-font-12n3"> {{ item.date }}</span>
          </div>
          <p v-if="item.remark?.includes('[info]')" class="subtitle">
            <span
              class="g-mr6 remark-info"
              v-for="(value, key) in getItemRemark(item.remark)"
              :key="key"
              :title="key > 0 ? '点击复制' : ''"
              @click="copyText(value)"
            >
              {{ value }}
            </span>
          </p>
          <p v-else class="subtitle">{{ item.remark ?? '' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="">
import { defineProps, computed, PropType } from 'vue';
import type { IProgress } from '../types';
import { useMessage } from '@/hooks/useMessage';

const props = defineProps({
  progressList: {
    type: Array as PropType<IProgress[]>,
    default: () => {
      return [];
    }
  },
  collapseState: {
    type: Boolean,
    default: false
  }
});

const renderColor = (status: string) => {
  switch (status) {
    case 'SUCCESS':
      return '#30CC4A';
    case 'ERROR':
      return '#CC3D3D';
    case 'WARNING':
      return '#EE8B00';
    default:
      return '#909399';
  }
};
const renderTextColor = (status: string) => {
  switch (status) {
    case 'SUCCESS':
      return '#00C048';
    case 'ERROR':
      return '#FF6045';
    case 'WARNING':
      return '#EE8B00';
    default:
      return '#51596C';
  }
};
const renderTag = (status: string) => {
  switch (status) {
    case 'SUCCESS':
      return 'success';
    case 'WARNING':
      return 'warning';
    case 'ERROR':
      return 'danger';
    default:
      return 'info';
  }
};
const getItemRemark = (remark: string) => {
  return remark.split('[info]')?.[1]?.split(' ');
};

const { createMessage } = useMessage();
function copyText(value: string) {
  navigator.clipboard.writeText(value).then(() => {
    createMessage.success('复制成功');
  });
}
</script>

<style lang="scss" scoped>
.audit-history__steps {
  width: 320px;
  .history-steps__title {
    padding: 17px 24px 13px;
    width: 100%;
    height: 52px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0a1f33;
    line-height: 22px;
    background: linear-gradient(180deg, #f8fbfc 0%, rgba(255, 255, 255, 0.7) 100%);
  }
  .history-steps__content {
    padding: 8px 20px;
    .step-item {
      display: flex;
    }
    .step-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      .circle {
        width: 16px;
        height: 16px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 3px;
        .point {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #d8d8d8;
        }
      }
      .step-line {
        width: 1px;
        height: 100%;
        background-image: linear-gradient(to bottom, #e4e7ed 0%, #e4e7ed 50%, transparent 50%);
        background-size: 1px 8px;
        background-repeat: repeat-y;
      }
    }
    .step-right {
      margin-left: 6px;
      margin-bottom: 32px;
      .subtitle {
        margin-top: 4px;
        color: #7a8a99;
        font-size: 12px;
        word-break: break-word;
        line-height: 20px;
        .remark-info {
          color: #308bf2;
          cursor: pointer;
          font-size: 14px;
        }
      }
      .status-span {
        font-weight: bold;
        display: inline-block;
      }
    }
  }
}
.line {
  width: 1px;
  height: 8px;
  background: #ebeff2;
  margin: 0 7px 0 8px;
}
</style>
